doctype html
html
  head
    meta(charset='utf-8')
    title= title
    link(rel='stylesheet' href='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css')
    link(rel='stylesheet' href='/stylesheets/mycss.css')
    link(rel='stylesheet' href='//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css')
    script(src='http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js')
    script(src='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js')
    script(src='/js/role_manage.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js')
    script(src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js')
    script(src='//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js') 
    script#table-template(type="text/x-handlebars-template").
      {{#each roles}}
        <tr class="success">
          <td>{{id}}</td>
          <td>{{user_name}}</td>
          <td>{{study_name}}</td>
          <td>{{site_name}}</td>
          <td>{{type}}</td>
          <td>{{state}}</td>
          {{#if expiring_date}}
          <td>{{expiring_date}}</td>
          {{^}}
          <td></td>
          {{/if}}
          <td>{{created_at}}</td>
          <td>{{updated_at}}</td>
          <td><button class="btn btn-primary btn-xs btn-block btn-upd" type="button" data-toggle="modal" data-target="#update" data-result='{"id":{{id}},"user_name":"{{user_name}}","study_name":"{{study_name}}","site_name":"{{site_name}}","type":"{{type}}","state":"{{state}}","expiring_date":"{{expiring_date}}"}'>修改</button></td>
          <td><button class="btn btn-danger btn-xs btn-block btn-del" type="button" data-toggle="modal" data-target="#delete" data-id={{id}}>删除</button></td>
        </tr>
      {{/each}}
  body
    div.container
      //提示栏
      div.row.hidden
        div#banner-danger.alert.alert-danger.alert-dismissable 
          span 将返回信息显示在这里
          button.close(type="type" data-dismiss="alert" aria-hidden="true") &times;
      div.row.hidden
        div#banner-search.alert.alert-info.alert-dismissable 
          span 搜索结果如下：
          a(href="/role_manage" style="float:right") 返回搜索前的原始结果
      //标题和搜索框
      div.row
        ul.list-inline
          li.col-lg-3.nonpadding
            p.content-title=title
          li.col-lg-6.nonpadding
          li.float-right.col-lg-3.nonpadding
            div.input-group
              span.input-group-btn
                - var users = results.users,studies = results.studies
                button.btn.btn-warning#btn-ad(type='button',data-user=users,data-study=studies,data-toggle="modal",data-target="#add") 添加角色信息
              input#searchBox.form-control(type='text',placeholder='输入关键字，支持模糊查询',required)
              span.input-group-btn
                button.btn.btn-warning.btn-search(type='button') 搜索
      //表格      
      div.row
        table.table
          thead
            tr
              th 序号
              th 用户名称
              th 项目名称
              th 机构名称
              th 类型
              th 状态
              th 过期时间
              th 创建日期
              th 修改日期
              th 修改
              th 删除
          tbody
            each result in results.results
              tr
              each val in result
                td.success #{val}
              td.success 
                - var info = result
                button(type='button' class='btn btn-primary btn-xs btn-block btn-upd' data-result=info data-toggle="modal",data-target="#update") 修改
              td.success 
                - var id = result.id
                button(type='button' class='btn btn-danger btn-xs btn-block btn-del' data-id=id data-toggle="modal",data-target="#delete") 删除
      //分页
      div.row(style="text-align:center;")
        ul.pagination#pagination(style="margin:0 auto;")
          li.page(page="first")
            a &laquo;
          - for (var i = 1; i < results.page_num+1; i++)
            li.page(page=i): a #{i}
          li.page(page="last" page_max=results.page_num)
            a &raquo;
      //显示返回信息的模态框
      div.modal.fade#infoReturn(tabindex='-1',role='dialog',aria-labelledby='delLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 返回信息
            div.modal-body#infoBody 返回的提示信息
            div.modal-footer
              button.btn.btn-primary#btn-confirm(type='submit') 确认
      //修改角色的模态框
      div.modal.fade#update(tabindex='-1',role='dialog',aria-labelledby='updLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 修改角色信息
            div.modal-body 
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 用户
                  div.col-sm-7
                    input.form-control#user_upd(type='text' disabled=true)
                  div.col-sm-3
                    p#warning6(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 项目
                  div.col-sm-7
                    input.form-control#study_upd(type='text' disabled=true)
                  div.col-sm-3
                    p#warning7(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 类型
                  div.col-sm-7
                    select.form-control#type_upd(disabled=true)
                      option(value='STUDY_ADMIN') STUDY_ADMIN
                      option(value='SITE_ADMIN') SITE_ADMIN
                      option(value='AUDITOR') AUDITOR
                      option(value='INPUTTER') INPUTTER
                  div.col-sm-3
                    p#warning9(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 机构
                  div.col-sm-7
                    input.form-control#site_upd(type='text' disabled=true)
                  div.col-sm-3
                    p#warning8(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 状态
                  div.col-sm-7
                    select.form-control#state_upd
                      option(value='ENABLE') ENABLE
                      option(value='DISABLE') DISABLE
                  div.col-sm-3
                    p#warning10(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 截止日期
                  div.col-sm-7
                    div.input-group.date#datetimepicker1
                      input.form-control#expiring_date_upd(type='text')
                      span.input-group-addon
                        span.glyphicon.glyphicon-calendar
                  script.
                    $(function() {
                      var cur = new Date();
                      $('#datetimepicker1').datetimepicker({
                        format:"YYYY-MM-DD HH:mm"
                      })
                      $('#datetimepicker1').on("dp.change",function(e) {
                        $(this).data("DateTimePicker").minDate(cur);
                      });
                    });
                  div.col-sm-3
                    p#warning12(style='color:#ff0000')
            div#id_upd(style="display:none") 存储待修改项的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-primary.btn-update(type='submit') 确认修改
            span#tips2
      //删除角色信息的模态框
      div.modal.fade#delete(tabindex='-1',role='dialog',aria-labelledby='delLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 删除角色
            div.modal-body#del_confirm 确认删除？
            div#del_id(style="display:none") 存储待删除的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-danger.btn-delete(type='submit') 确认删除
            span#tips1
      //添加角色信息的模态框
      div.modal.fade#add(tabindex='-1',role='dialog',aria-labelledby='addLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 添加新角色
            div.modal-body 
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 用户
                  div.col-sm-7
                    select.form-control#user
                  div.col-sm-3
                    p#warning1(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 项目
                  div.col-sm-7
                    select.form-control#study
                  div.col-sm-3
                    p#warning2(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 类型
                  div.col-sm-7
                    select.form-control#type
                      option(value='' selected) 请选择角色类型
                      option(value='STUDY_ADMIN') STUDY_ADMIN
                      option(value='SITE_ADMIN') SITE_ADMIN
                      option(value='AUDITOR') AUDITOR
                      option(value='INPUTTER') INPUTTER
                  div.col-sm-3
                    p#warning4(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 机构
                  div.col-sm-7
                    select.form-control#site
                  div.col-sm-3
                    p#warning3(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 状态
                  div.col-sm-7
                    select.form-control#state
                      option(value='ENABLE') ENABLE
                      option(value='DISABLE') DISABLE
                  div.col-sm-3
                    p#warning5(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 截止日期
                  div.col-sm-7
                    div.input-group.date#datetimepicker
                      input.form-control#expiring_date(type='text')
                      span.input-group-addon
                        span.glyphicon.glyphicon-calendar
                  script.
                    $(function() {
                      var cur = new Date();
                      $('#datetimepicker').datetimepicker({
                        format:"YYYY-MM-DD HH:mm"
                      });
                      $('#datetimepicker').on("dp.change",function(e) {
                        $(this).data("DateTimePicker").minDate(cur);
                      });
                    });
                  div.col-sm-3
                    p#warning11(style='color:#ff0000')
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-primary.btn-add(type='submit') 确认添加
            span#tips